<template>
    <!-- pages/maker/buymaker/index.wxml -->
    <view class="pages">
        <view class="title1">创客卡&收益卡</view>
        <view class="title2">一张让你分享就有收益的特权卡</view>
        <view class="title2">平台创客总销量{{ salesVolume }}张</view>
        <view class="maker">
            <image class="makerimg" :src="imgUrl + 'makerby.png'"></image>
            <view class="makerbox">
                <view class="makertext1">创客卡</view>
                <view class="makertext2 mt-10">CHUANGKEKA</view>
                <view class="makertext2 mt-10">**********</view>
                <view class="centers mt-54">
                    <text class="makertext3">¥</text>
                    <text class="makertext4">199</text>
                </view>
            </view>
            <view class="buybtn" @tap="onBuy">立即购买</view>
        </view>
        <view class="equities">
            <view class="eqtitle">创客卡九大权益</view>
            <view class="flexbox">
                <view class="eq-item" v-if="index < eqshow" :data-id="item.id" @tap="onRleuDetails" v-for="(item, index) in equitiesList" :key="index">
                    <image class="icon-88" :src="imgUrl + item.img"></image>

                    <view class="eq-name">{{ item.name }}</view>
                </view>
            </view>
            <view class="centers center mt-20">
                <image @tap="eqShowmore" v-if="eqshow == 6" class="icon-40" :src="imgUrl + 'makerbottom.png'"></image>
                <image @tap="eqShowmuch" v-if="eqshow == 10" class="icon-40" :src="imgUrl + 'makertop.png'"></image>
            </view>
        </view>
        <view class="mkbox1">
            <view class="centers">
                <view class="xian"></view>
                <view class="title">199买创客卡赠现金抵用券</view>
                <view class="xian"></view>
            </view>

            <view class="rollbox" v-if="index < moneyListindex" v-for="(item, index) in moneyList" :key="index">
                <view class="yx mr-20"></view>

                <view class="mkbox1text1">
                    <text class="mr-20">¥</text>
                    <text>{{ item }}</text>
                </view>

                <view class="mkbox1text2">
                    <view>现金抵用券</view>
                    <view class="mt-20">可自用，可分享</view>
                </view>

                <view class="mkbox1btn" @tap="onBuy">购买领取</view>
            </view>
            <!-- <view class="centers center mt-20">
      <image bindtap="moneyShowmore" wx:if="{{moneyListindex == 2}}" class="icon-40" src="{{imgUrl + 'makerbottom.png'}}"></image>
      <image bindtap="moneyShowmuch" wx:if="{{moneyListindex == 5}}" class="icon-40" src="{{imgUrl + 'makertop.png'}}"></image>
    </view> -->
        </view>
        <view class="mkbox2">
            <view class="centers">
                <view class="xian"></view>
                <view class="title">买商品套餐赠送创客卡</view>
                <view class="xian"></view>
            </view>

            <view
                class="shopbox mt-20"
                @tap="gotoNext"
                :data-url="item.url"
                :data-goodsid="item.id"
                :data-productSn="item.productSn"
                v-for="(item, index) in ProductList"
                :key="index"
            >
                <view>
                    <image class="shopimg" :src="item.pic"></image>
                </view>

                <view class="goods_sold padding-lr-sm text-sm text-white" v-if="item.sale">已售: {{ item.sale }}</view>

                <view class="pd-20">
                    <view class="shoptext1 mr-20">{{ item.name }}</view>
                    <view class="shoptext2">
                        <text class="mr-20">¥{{ item.price }}</text>
                        <text v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
                    </view>
                </view>
            </view>
            <view class="text-red">注：创客大礼包商品下单并支付成功后，订单不支持取消、退款、退货；如订单商品有质量问题请联系意约客服处理。</view>
        </view>
        <view class="morebtn" v-if="morebtn" @tap="onSee">查看更多创客大礼包</view>
        <view class="mkbox3">
            <view class="centers">
                <view class="xian"></view>
                <view class="title">分享推荐</view>
                <view class="xian"></view>
            </view>
            <view class="sharebox mt-40">
                <view class="share" @tap="onShare" :data-index="item.id" v-for="(item, index) in shareList" :key="index">
                    <view class="sharetext1">
                        <view>{{ item.title }}</view>
                        <view class="mt-20">{{ item.common }}</view>
                    </view>

                    <view class="sharebtn">现在去</view>
                </view>
            </view>
        </view>
        <block v-if="isRelease">
            <view class="mkbox4">
                <view class="centers">
                    <view class="xian"></view>
                    <view class="title">发红包赠卡券</view>
                    <view class="xian"></view>
                </view>
                <view class="redpacketbox mt-40">
                    <view class="redpacket" @tap="onRedenvelope" data-type="0">
                        <view class="redpackettext1">
                            <view>发红包</view>
                            <view class="mt-20">群发红包邀请更多亲友</view>
                        </view>
                        <view class="redpacketbtn">现在去</view>
                    </view>
                    <view class="redpacket" @tap="onRedenvelope" data-type="1">
                        <view class="redpackettext1">
                            <view>发现金券</view>
                            <view class="mt-20">分享现金券精准获取新用户</view>
                        </view>
                        <view class="redpacketbtn">现在去</view>
                    </view>
                </view>
            </view>
        </block>
        <view class="centers rule" @tap="onRlue">
            <text>规则</text>
            <image class="icon-32" :src="imgUrl + 'right2.png'"></image>
        </view>
    </view>
</template>

<script>
// pages/maker/buymaker/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            isRelease: getApp().globalData.isRelease,
            //提审屏蔽部分模块, 防止发布不通过
            morebtn: false,
            pages: 0,
            size: 6,
            equitiesList: [
                {
                    id: 0,
                    name: '订单收益奖',
                    img: '/static/pages/maker/buymaker/maker-eq1.png'
                },
                {
                    id: 1,
                    name: '直推创客奖',
                    img: '/static/pages/maker/buymaker/maker-eq2.png'
                },
                {
                    id: 2,
                    name: '推荐美发师',
                    img: '/static/pages/maker/buymaker/maker-eq3.png'
                },
                {
                    id: 3,
                    name: '推荐门店奖',
                    img: '/static/pages/maker/buymaker/maker-eq4.png'
                },
                {
                    id: 4,
                    name: '推荐新人奖',
                    img: '/static/pages/maker/buymaker/maker-eq5.png'
                },
                {
                    id: 5,
                    name: '分享商品收益',
                    img: '/static/pages/maker/buymaker/maker-eq6.png'
                },
                {
                    id: 6,
                    name: '门店股东',
                    img: '/static/pages/maker/buymaker/maker-eq7.png'
                }, // {
                //   id: 7,
                //   name: '间推创客奖',
                //   img: 'maker-eq8.png'
                // },
                {
                    id: 8,
                    name: '人才储备',
                    img: '/static/pages/maker/buymaker/maker-eq9.png'
                },
                {
                    id: 9,
                    name: '全球分红',
                    img: '/static/pages/maker/buymaker/maker-eq10.png'
                }
            ],
            eqshow: 6,
            salesVolume: 0,
            moneyList: ['20', '30', '50'],
            moneyListindex: 3,
            shareList: [
                {
                    title: '推荐门店',
                    common: '推荐线下店家入驻平台',
                    id: '2'
                },
                {
                    title: '推荐美发师',
                    common: '推荐优秀美发师入驻平台',
                    id: '1'
                },
                {
                    title: '推荐用户',
                    common: '推荐亲朋好友使用意约服务',
                    id: '0'
                }
            ],
            ProductList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (options.invitecode) {
            _request
                .postObj('/recomUser/bindInviteCode', {
                    userId: uni.getStorageSync('userid'),
                    invitecode: options.invitecode
                })
                .then((res) => {})
                .catch((error) => {
                    console.log(error);
                });
        } //获取创客卡数量

        _request
            .get('/yy-maker-card-buy-logs/salesVolume', {}, app.globalData.mallType)
            .then((res) => {
                this.setData({
                    salesVolume: res.data.data || 0
                });
            })
            .catch((error) => {
                console.log(error);
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getProductPackageInfo();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 点击展示更多现金券
        moneyShowmore() {
            this.setData({
                moneyListindex: 5
            });
        },

        // 点击展示更少现金券
        moneyShowmuch() {
            this.setData({
                moneyListindex: 2
            });
        },

        // 点击展示更多权限
        eqShowmore() {
            this.setData({
                eqshow: 10
            });
        },

        // 点击展示更少权限
        eqShowmuch() {
            this.setData({
                eqshow: 6
            });
        },

        // 购买
        onBuy() {
            uni.navigateTo({
                url: '/pages/maker/buymaker/pay/index'
            });
        },

        // 前往分享
        onShare(e) {
            uni.navigateTo({
                url: '/pages/generalize/index?index=' + e.currentTarget.dataset.index
            });
        },

        // 前往发红包
        onRedenvelope(e) {
            const { type } = e.currentTarget.dataset; // 跳转页面的tans下标

            app.globalData.redenvelopeactive = type;
            uni.navigateTo({
                url: '/pages/redenvelope/index'
            });
        },

        // 查看规则
        onRlue() {
            uni.navigateTo({
                url: '/pages/maker/makerdetails/makerrule/index'
            });
        },

        // 查看权益
        onRleuDetails(e) {
            const { id } = e.currentTarget.dataset;
            uni.navigateTo({
                url: '/pages/maker/makerequities/index?id=' + id
            });
        },

        gotoNext: function (item) {
            uni.navigateTo({
                url: '/shopingmall/goodsdetail/goodsdetail' + this.getparams(item.currentTarget.dataset)
            });
        },

        // 获取赠送创客卡的商品套餐列表
        getProductPackageInfo() {
            _request
                .get(
                    '/mall-product/list',
                    {
                        status: 4,
                        offset: this.pages,
                        size: this.size,
                        type: 1,
                        userId: uni.getStorageSync('userId')
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    this.setData({
                        ProductList: res.data.data.sort((a, b) => {
                            return b.sort - a.sort;
                        })
                    });

                    if (res.data.data.total > 6) {
                        this.setData({
                            morebtn: true
                        });
                    }
                });
        },

        // 跳转到创客列表页
        onSee() {
            uni.navigateTo({
                url: '/shopingmall/markerlist/markerlist'
            });
        },

        getparams: function (item) {
            const list = [];

            for (const key in item) {
                if (key === 'url') {
                    continue;
                }

                list.push(key + '=' + item[key]);
            }

            if (list.length) {
                return '?' + list.join('&');
            } else {
                return '';
            }
        }
    }
};
</script>
<style>
/* pages/maker/buymaker/index.wxss */
.pages {
    padding: 0 20rpx 40rpx 20rpx;
}

.title1 {
    width: 100%;
    height: 80rpx;
    font-size: 56rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 80rpx;
    text-align: center;
    margin-top: 10rpx;
}

.title2 {
    width: 100%;
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    text-align: center;
    margin-top: 10rpx;
}

/* 创客卡 */
.maker {
    position: relative;
    box-sizing: border-box;
    width: 710rpx;
    height: 360rpx;
    margin-top: 30rpx;
}

.makerbox {
    position: absolute;
    top: 40rpx;
    left: 30rpx;
}

.makerimg {
    width: 710rpx;
    height: 360rpx;
}

.makertext1 {
    height: 56rpx;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
}

.makertext2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 34rpx;
}

.makertext3 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.makertext4 {
    font-size: 48rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.buybtn {
    width: 160rpx;
    height: 56rpx;
    background: #ff8722;
    border-radius: 14px;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
    text-align: center;
    position: absolute;
    bottom: 40rpx;
    right: 40rpx;
}

.morebtn {
    width: 670rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    margin: 40rpx auto;
}

/* 权益 */
.equities {
    width: 710rpx;
    background: linear-gradient(136deg, #fff7ed 0%, #ffe1bc 53%, #ffd5a1 100%);
    box-shadow: 0px 2px 4px 0px rgba(230, 185, 131, 0.48), 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 60rpx;
}

.flexbox {
    display: flex;
    flex-wrap: wrap;
}

.eqtitle {
    width: 440rpx;
    height: 72rpx;
    background: linear-gradient(270deg, #ffebce 0%, #ecaa57 100%);
    box-shadow: 0px 2px 4px 0px #fcd29c;
    border-radius: 0px 0px 10px 10px;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #c6822d;
    line-height: 72rpx;
    margin: auto;
    text-align: center;
    position: relative;
    top: -36rpx;
}

.eq-item {
    width: calc(100% / 3);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin-top: 30rpx;
}

.eq-name {
    width: 100%;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    text-align: center;
    margin-top: 20rpx;
}

.center {
    justify-content: center;
    width: 100%;
}

/* 199买创客卡赠现金券抵用券 */
.xian {
    width: 60rpx;
    height: 2rpx;
    background: #bebebe;
}

.mkbox1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 70rpx;
}

.title {
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
    margin: 0 20rpx;
}

.rollbox {
    display: flex;
    width: 710rpx;
    height: 164rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 4px;
    margin-top: 20rpx;
    align-content: center;
    align-items: center;
    position: relative;
}

.yx {
    width: 8rpx;
    height: 102rpx;
    background: linear-gradient(270deg, #ff8722 0%, #ffbc47 100%);
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 4px;
    margin-right: 32rpx;
}

.mkbox1text1 {
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 56rpx;
    margin-right: 50rpx;
}

.mkbox1text1 text:nth-child(2) {
    font-size: 60rpx;
}

.mkbox1text2 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 44rpx;
}

.mkbox1text2 view:nth-child(2) {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
}

.mkbox1btn {
    width: 160rpx;
    height: 56rpx;
    background: #ff8722;
    border-radius: 14px;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
    text-align: center;
    position: absolute;
    right: 20rpx;
}

/* 买商品套餐赠送创客卡 */
.mkbox2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 70rpx;
}

.mkbox2 .centers {
    margin: 0 auto;
    margin-bottom: 20rpx;
}

.shopbox {
    width: 340rpx;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(230, 230, 230, 0.5);
    border-radius: 10px;
    position: relative;
}

.shopimg {
    width: 340rpx;
    height: 340rpx;
}

.pd-20 {
    padding: 20rpx;
}

.shoptext1 {
    height: 80rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.shoptext2 text:nth-child(1) {
    height: 44rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1717;
    line-height: 44rpx;
}

.shoptext2 text:nth-child(2) {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    text-decoration: line-through;
}

/* 分享推荐 */
.mkbox3 {
    margin-top: 60rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sharebox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.share {
    height: 146rpx;
    border-bottom: 1px solid #ededed;
    position: relative;
    display: flex;
    align-items: center;
}

.sharetext1 view:nth-child(1) {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 44rpx;
}

.sharetext1 view:nth-child(2) {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.sharebtn {
    position: absolute;
    right: 0rpx;
    width: 140rpx;
    height: 56rpx;
    background: #ff8722;
    border-radius: 28rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
    text-align: center;
}

/* 发红包 */
.mkbox4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 60rpx;
}

.redpacketbox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.redpacket {
    height: 146rpx;
    border-bottom: 1px solid #ededed;
    position: relative;
    display: flex;
    align-items: center;
}

.redpackettext1 view:nth-child(1) {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 44rpx;
}

.redpackettext1 view:nth-child(2) {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.redpacketbtn {
    position: absolute;
    right: 0rpx;
    width: 140rpx;
    height: 56rpx;
    background: #ff8722;
    border-radius: 28rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
    text-align: center;
}
/* 规则 */
.rule {
    position: fixed;
    right: 0;
    top: 50%;
    width: 120rpx;
    height: 60rpx;
    background: rgba(68, 68, 68, 0.13);
    border-radius: 96px 0px 0px 96px;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 60rpx;
    justify-content: center;
}

.text-red {
    color: red;
    font-size: 24rpx;
    margin-top: 20rpx;
}

.goods_sold {
    position: absolute;
    left: 0;
    top: 290rpx;
    line-height: 46rpx;
    border-radius: 0 20rpx 20rpx 0;
    background-color: rgb(0, 0, 0, 0.5);
}
</style>
